<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表页</title>
    <link rel="stylesheet" href="lib/reset.css">
    <link rel="stylesheet" href="lib/list.css">
    <link rel="stylesheet" href="lib/download/font_2136775_qhlyqf2gm9/iconfont.css">
</head>

<body>
    <div class="header">
        <img src="img/logo.png" alt="">
        <ul class="nav">
            <li>新品</li>
            <li>女士</li>
            <li>男士</li>
            <li>礼物</li>
            <li>线上专享</li>
        </ul>
        <ul class="header-list">
            <li>
                <span class="iconfont icon-kefu
                        "></span>
            </li>
            <li>
                <span class="iconfont icon-sousuo
                        "></span>
            </li>
            <li>
                <span class="iconfont icon-wo
                        " id="send"></span>
            </li>
            <li>
                <span class="iconfont icon-baobao
                        "></span>
            </li>
        </ul>
    </div>
    <div id="box1">
        <div class="box1-content">
            <ul class="first">
                <li>全新女士商品</li>
                <li>浏览所有全新女士商品</li>
                <li>手袋</li>
                <li>钱包</li>
                <li>服饰</li>
                <li>鞋履</li>
                <li>配饰</li>
            </ul>
            <ul class="two">
                <li>全新男士商品</li>
                <li>浏览所有全新男士商品</li>
                <li>手袋</li>
                <li>服饰</li>
                <li>鞋履</li>
                <li>配饰</li>
            </ul>
            <ul class="three">
                <li>女士潮流趋势</li>
                <li>秋季精选</li>
                <li>经典风格</li>
                <li>白色甄选</li>
                <li>热卖甄选</li>
            </ul>
            <ul class="four">
                <li>男士潮流趋势</li>
                <li>Pacer系列</li>
                <li>商务精选</li>
                <li>型男必备</li>
                <li>旅行商品</li>
            </ul>
            <ul class="five">
                <li>特色专题</li>
                <li>COACH X JENNIFER LOPEZ</li>
                <li>COACH X JEAN-MICHEL BASQUIAT</li>
                <li>Coach Originals</li>
                <li>Dream It Real</li>
                <li>Horse and Carriage</li>
                <li>十年历程，时刻铭记</li>
            </ul>
            <img src="img/1.png" alt="">
        </div>
    </div>
    <div id="box2">
        <div class="box2-content">
            <ul>
                <li>手袋</li>
                <li>浏览所有手袋</li>
                <li>单肩包</li>
                <li>手提包</li>
                <li>斜挎包</li>
                <li>大手袋</li>
                <li>手拿包</li>
                <li>背包</li>
            </ul>
            <ul>
                <li>钱包&手腕包</li>
                <li>浏览所有钱包&手腕包</li>
                <li>大号钱包</li>
                <li>中号钱包</li>
                <li>小号钱包</li>
                <li>手腕包</li>
            </ul>
            <ul>
                <li>服饰</li>
                <li>浏览所有服饰</li>
                <li>上衣</li>
                <li>外套</li>
                <li>连衣裙</li>
                <li>半身裙和裤子</li>
                <li>帽子、手套和围巾</li>
            </ul>
            <ul>
                <li>鞋履</li>
                <li>浏览所有鞋履</li>
                <li>CitySole</li>
                <li>平底鞋</li>
                <li>运动鞋</li>
                <li>靴子</li>
            </ul>
            <ul>
                <li>配饰</li>
                <li>浏览所有配饰</li>
                <li>钥匙链&挂件</li>
                <li>太阳眼镜</li>
                <li>时尚首饰</li>
                <li>护理产品</li>
                <li>手表</li>
                <li>皮带</li>
                <li>香水</li>
            </ul>
            <ul>
                <li>产品系列</li>
                <li>Alie系列</li>
                <li>Charlie系列</li>
                <li>Hutton系列</li>
                <li>Rambler系列</li>
                <li>Riley系列</li>
                <li>Tabby系列</li>
                <li>Tote系列</li>
                <li>Willis系列</li>
            </ul>
        </div>
    </div>
    <div id="box3">
        <div class="box3-content">
            <ul>
                <li>手袋</li>
                <li>浏览所有手袋</li>
                <li>公事包</li>
                <li>腰包</li>
                <li>背包</li>
                <li>信使包</li>
            </ul>
            <ul>
                <li>钱包和卡袋</li>
                <li>浏览所有钱包和卡袋</li>
                <li>大号钱包</li>
                <li>中号钱包</li>
                <li>卡袋</li>
            </ul>
            <ul>
                <li>服饰</li>
                <li>浏览所有服饰</li>
                <li>外套</li>
                <li>男士成衣</li>
            </ul>
            <ul>
                <li>鞋履</li>
                <li>浏览所有鞋履</li>
                <li>CitySole</li>
                <li>休闲鞋</li>
                <li>运动鞋</li>
            </ul>
            <ul>
                <li>配饰</li>
                <li>浏览所有配饰</li>
                <li>其他配件</li>
                <li>皮带</li>
                <li>手表</li>
                <li>香水</li>
                <li>太阳眼镜</li>
            </ul>
        </div>
    </div>
    <div id="box4">
        <div class="box4-content">
            <ul>
                <li>女士礼物</li>
                <li>浏览所有女士礼物</li>
                <li>3500元以下</li>
                <li>3500元-5000元</li>
                <li>奢华礼物</li>
                <li>热卖商品</li>
            </ul>
            <ul>
                <li>男士礼物</li>
                <li>浏览所有男士礼物</li>
                <li>3500元以下</li>
                <li>3500元-5000元</li>
                <li>奢华礼物</li>
                <li>热卖商品</li>
            </ul>
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
        </div>
    </div>
    <div id="box5">
        <div class="box5-content">
            <div class="txt">
                <span>手袋</span>
                <span>钱包</span>
            </div>
            <img src="img/4.png" alt="">
        </div>
    </div>
    <div class="list">
        <div class="list-content">
            <span class="listOne">女士</span>
            <span class="listTwo">女士(884)
                    <img src="img/jiantou.png" alt="" id="logo1">
                    <ul class="menu">
                        <li>手袋(362)</li>
                        <li>钱包&手腕包(189)</li>
                        <li>服饰(134)</li>
                        <li>鞋履(44)</li>
                        <li>配饰(187)</li>
                        <li>产品系列(293)</li>
                    </ul>
                </span>
            <span class="listThree">女士</span>
            <span class="listFour">筛选
                    <img src="img/jiantou.png" alt="">
                </span>
            <span class="listFive">排序
                    <img src="img/jiantou.png" alt="" id="logo2">
                    <ul class="order">
                            <li>新品优先</li>
                            <li>畅销优先</li>
                            <li>价格从高到低</li>
                            <li>价格从低到高</li>
                        </ul>
                </span>
        </div>
    </div>
    <div class="shopList">
        <div class="shopList-content">
            <ul id="ul">
                <li id="template">
                    <a href="details.html">
                        <img src="" alt="">
                    </a>
                    <span class="new">新品</span>
                    <span class="add">+</span>
                    <p></p>
                    <span class="dot">￥&nbsp;</span>
                    <span class="price" id="money"></span>
                </li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <div class="footer-content">
            <div class="footer-top">
                <ul>
                    <li>网站与精品店</li>
                    <li>查找精品店</li>
                    <li>网站导航</li>
                    <li>使用条款</li>
                    <li>安全与隐私</li>
                </ul>
                <ul>
                    <li>客户服务</li>
                    <li>关于订单</li>
                    <li>关于产品</li>
                    <li>VIP会籍招募条件</li>
                    <li>联系我门</li>
                </ul>
                <ul>
                    <li>关于COACH</li>
                    <li>公司信息</li>
                    <li>TAPESTRY</li>
                    <li>职业招聘</li>
                </ul>
                <ul>
                    <li>关注COACH</li>
                    <li>官方微博</li>
                    <li>官方微信</li>
                    <img src="img/erweima.png" alt="">
                    <li>关注COACH官方微信</li>
                    <li>获取电子会员卡及微信</li>
                    <li>专属礼遇</li>
                </ul>
                <ul>
                    <li>获取COACH新讯</li>
                    <li>
                        <input type="text" placeholder="电子邮箱*">
                    </li>
                    <li>
                        <input type="text" placeholder="确认电子邮箱*">
                    </li>
                    <li>您已经注册并同意接受COACH邮件，您可以随时取消订阅。</li>
                    <li>阅读<u>安全与隐私政策</u>或<u>联系我们</u>获取更多信息。</li>
                    <li>
                        加入我们
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; THE ESTATE OF RICHARD BERNSTEIN</p>
            <p>&copy; 2020 COACH IP HOLDINGS LLC. COACH, COACH SIGNATURE C DESIGN, COACH & TAG DESIGN, COACH HORSE & CARRIAGE DESIGN ARE REGISTERED TRADEMARKS OF COACH IP HOLDINGS LLC.</p>
            <span>泸ICP备0906012号-1,</span>
            <img src="img/wron1.png" alt="">
            <span>上海工商</span><br>
            <img src="img/wron2.png" alt="">
            <span>泸公网备31010602000942</span>
        </div>
    </div>
    <div class="fix">
        <span class="iconfont icon-kefu"></span>
    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>

    <script>
        $("#logo1").click(function() {
            $(this).toggleClass("show");
            $(".menu").slideToggle();
        })
        $("#logo2").click(function() {
            $(this).toggleClass("show");
            $(".order").slideToggle();
        })

        //原生js写ajax请求
        let http = new XMLHttpRequest();
        http.open('get', `${address}/getList`);
        http.send()
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                let data = JSON.parse(http.responseText);
                let template = $("#template");
                let ul = $("#ul");
                data.forEach(item => {
                    let newLi = template.clone();
                    newLi.attr("id", "");
                    newLi.find("a").attr("href", `details.html?id=${item.id}`);
                    newLi.find("img").attr("src", item.img);
                    newLi.find("p").html(item.title);
                    newLi.find(".price").html(item.price);
                    newLi.appendTo(ul);
                })
            }
        }

        let li1 = $(".nav li").eq(0);
        let li2 = $(".nav li").eq(1);
        let li3 = $(".nav li").eq(2);
        let li4 = $(".nav li").eq(3);
        let li5 = $(".nav li").eq(4);
        li1.mouseenter(function() {
            $("#box1").show();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box1").mouseleave(function() {
            $("#box1").hide();
        })
        li2.mouseenter(function() {
            $("#box2").show();
            $("#box1").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box2").mouseleave(function() {
            $("#box2").hide();
        })
        li3.mouseenter(function() {
            $("#box3").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box3").mouseleave(function() {
            $("#box3").hide();
        })
        li4.mouseenter(function() {
            $("#box4").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box5").hide();
        })
        $("#box4").mouseleave(function() {
            $("#box4").hide();
        })
        li5.mouseenter(function() {
            $("#box5").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
        })
        $("#box5").mouseleave(function() {
            $("#box5").hide();
        })
    </script>
</body>

</html>